<script setup lang='ts'>
  import { reactive, ref } from 'vue';
  import request from '@/api/index';
  import xmdialog from '@/components/xmdialog.vue';
  import { xmloading } from '@/utils/public';
  const action = reactive({
    recordshow:false,
    page:1,
    limit:20,
    list:[] as Array<any>
  })
  const loadingSet = ref(false); // 是否处于加载状态
  const loadSet = ref(true); // 是否已加载完成 不再触发 load 事件
  const listload = ()=> {
    if(loadSet.value || action.list.length == 0) return
    action.page += 1
    getList();
  };
  const getList = async()=>{
    const res = await request.debrisExchangeLog({
      page:action.page,
      limit:action.limit,
    })
    const { list=[] } = res?.data
    // 列表返回空 禁止触底事件
    if(list.length == 0) {
      loadSet.value = true
      return
    }
    loadSet.value = false
    loadingSet.value = false
    action.list = [...action.list, ...list]
    if(list.length < action.limit) {
      loadSet.value = true
    }
  }
  const openDialog = async()=>{
    const loading = xmloading()
    action.page = 1
    action.list = []
    await getList()
    loading.close()
    action.recordshow = true
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <xmdialog v-model:dialogshow="action.recordshow">
    <img src="@/assets/images/titleimg3.png" class="titleImg">
    <div class="backImageColor">
      <van-list
        class="list"
        :offset="30"
        v-model:loading="loadingSet"
        :finished="loadSet"
        @load="listload">
        <div v-for="item in action.list" class="goodsInfo flex-align">
          <div class="image">
            <img :src="item.small_img">
          </div>
          <div class="right">
            <dl class="info flex-align-between">
              <dt>{{ item.goods_name }}</dt>
              <dd>{{ item.price }}碎片</dd>
            </dl>
            <ul class="deplete flex-align-between">
              <li>{{ item.num }}天</li>
              <li>{{ item.created_at }}</li>
            </ul>
          </div>
        </div>
      </van-list>
    </div>
  </xmdialog>
</template>

<style lang='scss' scoped>
  :deep(.Functionality) {
    padding: 23px 0 0;
    .titleImg {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: auto;
      height: 43px;
    }
  }
  .backImageColor {
    width: 312px;
    height: 376px;
    padding: 35px 15px 10px;
    box-sizing: border-box;
    background: #0F0F54;
    border: 1px solid #FFFDE5;
    border-radius: 12px;
    display: flex;
    .list {
      overflow-x: hidden;
      overflow-y: auto;
      flex: 1;
      height: 100%;
    }
    .list::-webkit-scrollbar {
      display: none;
    }
    .goodsInfo {
      width: 100%;
      margin-bottom: 12px;
      .image {
        width: 60px;
        height: 60px;
        margin-right: 12px;
        padding: 8px;
        box-sizing: border-box;
        background: linear-gradient(360deg, #240442 0%, #090018 100%);
        border-radius: 4px;
        border: 1px solid #6B5EBC;
      }
      .right {
        flex: 1;
      }
      .info {
        line-height: 14px;
        font-size: 14px;
        font-weight: 500;
        dt {
          color: #FFEED5;
        }
        dd {
          color: #FFE743;
        }
      }
      .deplete {
        margin-top: 6px;
        li {
          color: rgba($color: #FFEED5, $alpha: .5);
          font-size: 12px;
          font-weight: 400;
          line-height: 12px;
        }
      }
    }
  }
</style>